"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import Model from '@/app/admin/users/components/Modal'

import { getUsers, updUser, delUser } from '@/api/usersApi'
import { maintenanceRecords } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState(maintenanceRecords);

  const Init = async () => {
    const res = await getUsers()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
    // Init()
  }, [])
  // 删除确认框
  const DelUser = async (_id: string) => {
    // await delUser({ _id })
    // await Init()
    message.success('操作成功');
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({ userInfo: {}, userId: '', type: 0 });


  const columns = [
    {
      title: '记录 ID',
      dataIndex: 'recordId',
      key: 'recordId',
    },
    {
      title: '电池 ID',
      dataIndex: 'batteryId',
      key: 'batteryId',
    },
    {
      title: '维护时间',
      dataIndex: 'maintenanceDate',
      key: 'maintenanceDate',
      render: (text: number) => {
        return text
      },
    },
    {
      title: '维护内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '维护人员',
      dataIndex: 'maintenancePerson',
      key: 'maintenancePerson',
    },
    {
      title: '维护成本（元）',
      dataIndex: 'cost',
      key: 'cost',
    },
    {
      title: '维护类型',
      dataIndex: 'maintenanceType',
      key: 'maintenanceType',
    },
    {
      title: '更换零部件列表',
      dataIndex: 'partsReplaced',
      key: 'partsReplaced',
    },
    {
      title: '停机时长（小时）',
      dataIndex: 'downtime',
      key: 'downtime',
    },
    {
      title: '下次维护建议日期',
      dataIndex: 'nextMaintenanceDate',
      key: 'nextMaintenanceDate',
    },
    {
      title: '质检人员',
      dataIndex: 'inspector',
      key: 'inspector',
    },
    {
      title: '是否通过验收',
      dataIndex: 'isApproved',
      key: 'isApproved',
      render: (text: any) => {
        return text ? '是' : '否'
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: { recordId: string; }) => (
        <Space size="middle">
          <Popconfirm
            title="是否删除这条数据?"
            onConfirm={() => DelUser(record.recordId)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Table columns={columns} dataSource={data} rowKey={record => record.recordId} />
      <Model isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} Init={Init} />
    </div>
  </Content>
  );
};
